<!DOCTYPE html>
{% load i18n %}
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.ico"/>
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
    {% include '../show/link.html' %}

    <title>{% trans '安全中心' %}</title>
    <style>
        .main_body {
            min-height: 700px;
        }
        .this-fs {
            font-size: 12px;
        }
        .safe {
            font-size:20px;
        }
        .safe .title {
            padding:20px 20px 20px 20px;
            border-bottom:1px solid #f1f1f1
        }
        .safe .panel-body {
            font-size:18px;
        }
        .safe .panel-body li {
            width:"100%";
            padding:20px 20px 20px 20px;
            border-bottom:1px solid #f1f1f1
        }
        .safe .panel-body li span .fa  {
            color:gray;
            padding:0px 20px;

        }
        .safe .panel-body li span .active  {
            color:#0e75ee;
        }
        .safe li {
            list-style:none;
            width:100%;
            display: inline-block;
        }
        .safe li span {
            display: inline-block;
            float:left;
        }
        .safe li .li_title {
            width:30%;
        }
        .safe li .li_body {
            width:50%;
            font-size:14px;
            color:gray;
        }
        .safe li .li_opt {
            width:20%;
            font-size:14px;
            color:gray;
        }
    </style>

    <script>
        $(document).ready(function() {
            $("#safe").addClass("active");
        })

        function myFunction() {
            var copyText = document.getElementById("copy_data");
            copyText.select();
            document.execCommand("Copy");
            alert("{% trans '复制成功' %}");
        }
    </script>
</head>

<body>
    {% include '../show/top_bar.html' %}
    <div class="main_body">
        <br>
        <div class="container">
            {% include './sider.html' %}
            <div class="col-md-10 main-left this-fs f-pz ">
                <div class="safe ">
                    <div class="panel ">
                        <div class="panel-heading">
                            <div class="panel-heading-title title">{% trans '安全設置' %}</div>
                        </div>
                        <div class="panel-body" >
                            <ul class="list-group">
                                <li>
                                    <span class="li_title"><i class="fa fa-check-circle active"></i>{% trans '绑定邮箱' %}</span>
                                <span class="li_body">{% trans '你绑定的邮箱为' %}: {{user.email}}</span>
                                <span class="li_opt f-fr">{% trans '修改联系客服' %}</span>
                                </li>
                                <li >
                                <span class="li_title">
                                    <i class="fa fa-check-circle active"></i>{% trans '手机短信验证' %}</span>
                                <span class="li_body">{% trans '你绑定的手机是' %}: {{user.phone}}</span>
                                    <!--
                                    <span class="li_opt "><a href="{% url 'change_phone' %}" class="btn btn-block">联系客服修改</a></span>
                                    -->
                                    <span class="li_opt ">{% trans '联系客服修改' %}</span>
                                </li>
                                <!--
                                <li><span class="li_title"><i class="fa fa-check-circle"></i> 谷歌验证 </span></li>
                                -->
                                <li >
                                    <span class="li_title "> <i class="fa fa-check-circle active"></i>{% trans '登录密码' %}</span>
                                    <span class="li_body">{% trans '登录本站的时候使用' %}</span>
                                    <span class="li_opt "><a href="{% url 'users:password_change'%}" class="btn btn-block">{% trans '修改' %}</a></span>
                                </li>
                                <!--
                                <li><span class="li_title"> <i class="fa fa-times-circle-o"></i> 通知设置 </span></li>
                                -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include '../show/footer.html' %}
</body>
</html>
